<template>
  <div>
    <el-table
      border
      :data="goodsList"
    >
      <el-table-column
        prop="goodsId"
        :label="$t('table.ListingIDAndSKU')"
        min-width="200"
        align="center"
      >
        <template v-slot="{row}">
          <template v-if="row.isTB">
            {{ $t('shipment.Not labeled') }} {{row.sku ? `(${row.sku})` : ''}}
          </template>
          <template v-else-if="row.isSystem">
            {{ $t('shipment.System label') }} ({{row.sku}})
          </template>
          <template v-else>
            {{row.goodsId}}{{row.sku ? `(${row.sku})` : ''}}
          </template>
        </template>
      </el-table-column>
      <m-l-code-column></m-l-code-column>
      <el-table-column
        prop="stockNum"
        label="库存数量"
        min-width="150"
        align="center"
      >
        <template v-slot="{row}">
          <template v-if="canEdit">
            <el-input-number v-model="row[stockField]" @change="changeStock(row)"></el-input-number>
          </template>
          <template v-else>
            {{row[stockField]}}
          </template>
        </template>
      </el-table-column>

    </el-table>
    <el-button type="primary" class="mgt10" :disabled="btnDisabled" @click="dialog = true;" v-if="canEdit">修改库存</el-button>
    <el-dialog
      :title="$t('stock.sureEditStock')"
      :visible.sync="dialog"
      width="500px"
    >
      <div style="margin-bottom: 20px;">{{ $t('stock.editStockText1') }}：</div>
      <div
        v-for="item in editGoodsList"
        :key="item.id"
        class="mgb10 mgt10"
      >
          <span class="mgr10">
            <template v-if="item.isTB">
                {{ $t('shipment.Not labeled') }} {{item.sku ? `(${item.sku})` : ''}}
            </template>
            <template v-else-if="item.isSystemLabel || item.isSystem">
              {{ $t('shipment.System label') }} ({{item.sku}})
            </template>
            <template v-else>
              {{item.goodsId}}{{item.sku ? `(${item.sku})` : ''}}
            </template>
            :</span>
        <span class="font-red">{{item[stockField]}}</span>
      </div>

      <div class="font-red mgt20">
        {{$t('stock.editStockText2')}}
      </div>
      <div class="footer mgt20">
        <el-button @click="dialog = false">{{$t('common.cancel')}}</el-button>
        <el-button @click="editStockNum" type="primary" :loading="btnLoading">{{$t('common.confirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MLCodeColumn from "@/views/stock/components/MLCodeColumn.vue";
import {editMixinStockNum} from "@/api/stock";

export default {
  name: "EditStockNumMixin",
  components: {MLCodeColumn},
  props: {
    goodsList: {
      type: Array,
      required: true
    },
    stockField: {
      type: String,
      required: true,
    }, // 修改的库存字段
    originStockField: {
      type: String,
      required: true,
    }, // 原始库存的数量
    canEdit: {
      type: Boolean,
      default: true,
    },
    warehouseId: {
      type: Number,
      required: true,
    }
  },
  computed: {
    btnDisabled(){
      return !this.goodsList.some(item => item[this.stockField] !== item[this.originStockField])
    },
    editGoodsList(){
      return this.goodsList.filter(item => item[this.stockField] !== item[this.originStockField])
    }
  },
  data(){
    return {
      dialog: false,
      btnLoading: false,
    }
  },
  methods: {
    changeStock(row){
      if(row[this.stockField] === undefined){
        row[this.stockField] = 0
      }
    },
    editStockNum(){
      const arr = this.editGoodsList.map(item => {
        return {
          userId: item.userId,
          suitId: item.suitId,
          suitListId: item.suitListId,
          isGoods: item.isGoods,
          isSystem: item.isSystem,
          isTB: item.isTB,
          sku: item.sku,
          systemLabelId: item.systemLabelId,
          editNum: item[this.stockField], // 修改的库存数为
        }
      })
      const data = {
        goodsList: arr,
        stockField: this.stockField,
        warehouseId: this.warehouseId,
      }
      this.btnLoading = true
      editMixinStockNum(data)
        .then(res=>{
          this.dialog = false
          this.btnLoading = false
          if(res.error === 0){
            this.$successMessage(res.message)
            this.$emit('changeStockNum')
          }else{
            this.$errorMessage(res.message)
          }
        })

    }
  }
}
</script>


<style scoped lang="scss">

</style>
